<template>
  <div class="el-container layout-container">
    <el-main class="layout-main">
      <el-scrollbar
          ref="layoutMainScrollbarRef"
          class="layout-main-scroll layout-backtop-header-fixed"
          wrap-class="layout-main-scroll"
          view-class="layout-main-scroll"
      >
        <div class="layout-parent">
          <div class="w100">
            <div class="layout-padding w25" style="padding-right: 0 !important">
              <div class="layout-padding-auto layout-padding-view" style="overflow: auto;">
                <el-row>

                  <div class="layout-logo">
                    <span style="color: var(--el-color-primary);">
                      患者健康数据看板
                    </span>
                  </div>

                  <el-divider content-position="center">设备信息</el-divider>

                  <web-socket ref="webSocketRef" @rollback="rollback"/>

                  <el-divider content-position="center">基础信息</el-divider>
                  <el-form :inline="true" :model="queryForm">
                    <el-row>
                      <el-form-item prop="medicalCard">
                        <template v-slot:label>
                          <span class="strong-text-label">社保卡号：</span>
                        </template>
                        <span class="strong-text-content">{{ queryForm.medicalCard }}</span>
                      </el-form-item>
                      <el-form-item prop="icCard" label="">
                        <template v-slot:label>
                          <span class="strong-text-label">身份证号：</span>
                        </template>
                        <span class="strong-text-content">{{ queryForm.icCard }}</span>
                      </el-form-item>
                    </el-row>
                  </el-form>
                  <el-form :inline="true" :model="queryForm">
                    <el-row>
                      <el-form-item prop="name">
                        <template v-slot:label>
                          <span class="strong-text-label">姓名：</span>
                        </template>
                        <span class="strong-text-content">{{ queryForm.name }}</span>
                      </el-form-item>
                      <el-col :span="12">
                        <el-form-item prop="age">
                          <template v-slot:label>
                            <span class="strong-text-label">年龄：</span>
                          </template>
                          <span class="strong-text-content">{{ queryForm.age }}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="birthday">
                          <template v-slot:label>
                            <span class="strong-text-label">出生日期：</span>
                          </template>
                          <span class="strong-text-content">{{ queryForm.birthday?.substring(0, 11) }}</span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="sex">
                          <template v-slot:label>
                            <span class="strong-text-label">性别：</span>
                          </template>
                          <span class="strong-text-content">
                            <dict-tag :options="gender" :value="queryForm.sex"></dict-tag>
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="healthStatus">
                          <template v-slot:label>
                            <span class="strong-text-label">管理状态：</span>
                          </template>
                          <span class="strong-text-content">
                            <dict-tag :options="bloodx_health" :value="queryForm.healthStatus"></dict-tag>
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-form-item prop="tel" label="">
                        <template v-slot:label>
                          <span class="strong-text-label">联系电话：</span>
                        </template>
                        <span class="strong-text-content">
                          {{ queryForm.tel }}
                        </span>
                      </el-form-item>
                      <el-col :span="12">
                        <el-form-item prop="zbDoctor">
                          <template v-slot:label>
                            <span class="strong-text-label">专病医生：</span>
                          </template>
                          <span class="strong-text-content">
                          <template v-for="item in ZBDoctorList">
                            {{ item.userId === queryForm.zbDoctor ? item.name : '' }}
                          </template>
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="doubleSign">
                          <template v-slot:label>
                            <span class="strong-text-label">双签：</span>
                          </template>
                          <span class="strong-text-content">
                            <el-tag v-if="queryForm.doubleSign === 1">双签</el-tag>
                            <el-tag v-if="queryForm.doubleSign === 0" type="warning">非双签</el-tag>
                        </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="familyDoctor">
                          <template v-slot:label>
                            <span class="strong-text-label">家庭医生：</span>
                          </template>
                          <span class="strong-text-content">
                          <template v-for="item in doctorList">
                            {{ item.userId === queryForm.familyDoctor ? item.name : '' }}
                          </template>
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="village">
                          <template v-slot:label>
                            <span class="strong-text-label">村：</span>
                          </template>
                          <span class="strong-text-content">
                            <template v-for="item in village">
                              {{ item.id === queryForm.village ? item.name : '' }}
                            </template>
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-form-item prop="address">
                        <template v-slot:label>
                          <span class="strong-text-label">地址：</span>
                        </template>
                        <span class="strong-text-content">
                          {{ queryForm.address }}
                        </span>
                      </el-form-item>
                    </el-row>
                  </el-form>
                  <el-divider content-position="center">常规信息</el-divider>
                  <el-form :inline="true" :model="queryForm">
                    <el-row>
                      <el-col :span="12">
                        <el-form-item prop="height">
                          <template v-slot:label>
                            <span class="strong-text-label">身高/cm：</span>
                          </template>
                          <span class="strong-text-content">
                            {{ queryForm.height }}
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="weight">
                          <template v-slot:label>
                            <span class="strong-text-label">体重/kg：</span>
                          </template>
                          <span class="strong-text-content">
                            {{ queryForm.weight }}
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-form-item prop="bmi">
                        <template v-slot:label>
                          <span class="strong-text-label">BMI：</span>
                        </template>
                        <span class="strong-text-content">
                          {{ queryForm.bmi }}
                        </span>
                      </el-form-item>
                      <el-col :span="12">
                        <el-form-item prop="diastolicPressure">
                          <template v-slot:label>
                            <span class="strong-text-label">舒张压/mmHg：</span>
                          </template>
                          <span class="strong-text-content">
                            {{ queryForm.diastolicPressure }}
                          </span>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item prop="systolicPressure">
                          <template v-slot:label>
                            <span class="strong-text-label">收缩压/mmHg：</span>
                          </template>
                          <span class="strong-text-content">
                            {{ queryForm.systolicPressure }}
                          </span>
                        </el-form-item>
                      </el-col>
                    </el-row>
                  </el-form>
                </el-row>
              </div>
            </div>
            <div class="layout-padding w75" style="left: 25%">
              <div class="layout-padding-auto layout-padding-view" style="overflow: auto;">
                <blood-view ref="bloodViewRef"/>
                <drug-view ref="drugViewRef"/>
                <room-view ref="roomViewRef"/>
                <exam-view ref="examViewRef"/>
                <illness-view ref="illnessViewRef" style="margin-bottom: 60px"/>
                <div class="btn-flex">
                  <el-button type="primary" size="large" @click="submitBtn" style="margin-right: 10px">
                    确认提交
                  </el-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </el-main>
  </div>
</template>
<script setup lang="ts" name="bloodMedicalView">
import {useMessage} from "/@/hooks/message";


import IllnessView from "/@/views/life/illnessView.vue";
import DrugView from "/@/views/life/drugView.vue";
import BloodView from "/@/views/life/bloodView.vue";
import ExamView from "/@/views/life/examView.vue";
import RoomView from "/@/views/life/roomView.vue";
import webSocket from "/@/views/life/Websocket/index.vue";
import {getCustomerByCard, sysVillageList, getDoctorList, getDictData} from "/@/api/life";
import {ElMessage} from "element-plus";
import {getAllZbDoctor} from "/@/api/information/village";


const illnessViewRef = ref();
const drugViewRef = ref();
const roomViewRef = ref();
const bloodViewRef = ref();
const examViewRef = ref();

const doctorList = ref<any[]>([]);
const village = ref([]);
const gender = ref([]);
const bloodx_health = ref([]);
const code = ref(null);

const webSocketRef = ref();
const ZBDoctorList = ref<any[]>([]);

const queryForm = ref({
  medicalCard: '',
  icCard: '',
  name: '',
  age: '',
  birthday: '',
  sex: '',
  tel: '',
  address: '',
  village: '',
  healthStatus: '',
  familyDoctor: '',
  height: '',
  weight: '',
  bmi: '',
  customerId: '',
  diastolicPressure: '', // 舒张压
  systolicPressure: '', // 收缩压
  zbDoctor: '', // 专病医生
  doubleSign: '' // 双签
})

onMounted(() => {
  // code
  code.value = useRoute().query.code || useRoute().params.code
  if (code.value === null || code.value === '') {
    ElMessage({
      message: '未获取到code',
      type: 'warning',
      duration: 0
    })
  } else {
    webSocketRef.value.setCode(code.value)
  }
})

const rollback = (val) => {
  if (val.type === "CARD_INFO") {
    resetQuery()
    let carInfo = JSON.parse(val.data)
    queryForm.value.medicalCard = carInfo.medicalCard
    queryForm.value.icCard = carInfo.icCard
    getCustomerData()
  } else if (val.type === "UPDATE_INFO") {
    let carInfo = JSON.parse(val.data)
    let medicalCard = carInfo.medicalCard
    let icCard = carInfo.icCard
    if (queryForm.value.medicalCard !== undefined) {
      if (queryForm.value.medicalCard === medicalCard) {
        bloodViewRef.value.getData(queryForm.value)
      }
    } else if (queryForm.value.icCard !== undefined) {
      if (queryForm.value.icCard === icCard) {
        bloodViewRef.value.getData(queryForm.value)
      }
    }
  }
}

const getdoctorList = () => {
  getDoctorList().then((res) => {
    doctorList.value = res.data;
  });

  sysVillageList().then((res) => {
    village.value = res.data;
  });

  getDictData("gender").then((res) => {
    gender.value = res.data;
  });

  getDictData("bloodx_health").then((res) => {
    bloodx_health.value = res.data;
  });

  getAllZbDoctor().then((res) => {
    ZBDoctorList.value = res.data;
  });
};


const submitBtn = () => {
  drugViewRef.value.submitData()
}

const getCustomerData = () => {
  getdoctorList()
  if (!queryForm.value.medicalCard && !queryForm.value.icCard) {
    useMessage().error('请输入社保卡号或身份证号');
    return
  }
  let obj = {}
  if (queryForm.value.medicalCard) {
    obj.medicalCard = queryForm.value.medicalCard
  }
  if (queryForm.value.icCard) {
    obj.icCard = queryForm.value.icCard
  }
  getCustomerByCard(obj).then((res) => {
    if (!res.data) {
      useMessage().error('未查询到数据');
      return
    }
    queryForm.value = res.data
    queryForm.value.customerId = res.data.id

    illnessViewRef.value.getData(queryForm.value)
    drugViewRef.value.getData(queryForm.value)
    roomViewRef.value.getData(queryForm.value)
    bloodViewRef.value.getData(queryForm.value)
    examViewRef.value.getData(queryForm.value)
  }).catch(() => {
    useMessage().error('未查询到数据');
  })
}

const resetQuery = () => {
  // 清空搜索条件
  queryForm.value = {
    medicalCard: '',
    icCard: '',
    name: '',
    age: '',
    birthday: '',
    sex: '',
    tel: '',
    address: '',
    village: '',
    healthStatus: '',
    familyDoctor: '',
    height: '',
    weight: '',
    bmi: '',
    diastolicPressure: '',
    systolicPressure: '',
    customerId: '',
    zbDoctor: '',
    doubleSign: ''
  }
  bloodViewRef.value.clearData()
  drugViewRef.value.clearData()
  examViewRef.value.clearData()
  illnessViewRef.value.clearData()
  roomViewRef.value.clearData()
}
</script>


<style scoped lang="scss">
.btn-flex {
  text-align: right;
  padding: 10px 0;
  position: absolute;
  bottom: 5px;
  left: 15px;
  background: #FFF;
  width: calc(100% - 30px);
  z-index: 999;
  box-shadow: var(--el-box-shadow-light);
  border-radius: 4px;
}

:deep(.el-form-item__label) {
  padding: 0;
}

:deep(.el-form.el-form--inline .el-form-item) {
  width: 100%;
}

:deep( .el-form.el-form--inline .el-form-item) {
  margin-right: 0;
}

:deep(.el-form.el-form--inline .el-form-item--default.el-form-item:last-of-type,.el-form-item--default) {
  margin-bottom: 10px !important;
}

:deep(.el-form-item--default) {
  margin-bottom: 10px !important;
}

:deep(.el-divider__text) {
  font-size: 16px;
  font-weight: bold;
}

.layout-logo {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: rgb(0 21 41 / 2%) 0px 1px 4px;
  font-size: 16px;
  cursor: pointer;
  animation: logoAnimation 0.3s ease-in-out;

  span {
    white-space: nowrap;
    display: inline-block;
    font-size: 21.5px;
    font-weight: 700;
    white-space: nowrap;
  }

  &:hover {
    span {
      color: var(--color-primary-light-2);
    }
  }
}
</style>
